import React, { useState, useCallback } from 'react'
import { CSSTransition } from 'react-transition-group'
import './style.css'
import 'animate.css'

export default function Transition() {
  const [show, setShow] = useState(true)

  const handleClick = useCallback(
    () => {
      setShow(show => !show)
    },
    [],
  )

  return (
    <div>
      <CSSTransition
        timeout={1000}
        in={show}
        classNames={{
          enter: 'animate__animated',
          enterActive: 'animate__tada',
          exit: 'animate__animated',
          exitActive: 'animate__headShake',
        }}
        appear={true}
      >
        <h1>hello react</h1>
      </CSSTransition>
      <div>
        <button onClick={handleClick}>change status</button>
      </div>
    </div>
  )
}
